<template>
    <el-row>
        <el-col :span="24" class="bread-list">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item v-for="(item, index) in breadList" :key="index" :to="item.path">{{item.meta.title}}</el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
    </el-row>
</template>

<script lang="ts" setup>
    import { ref, Ref, watch } from 'vue'
    import { useRoute, RouteLocationMatched } from 'vue-router'

    const route = useRoute()
    const breadList:Ref<RouteLocationMatched[]> = ref([])

    // 获取路由数据
    const getRouteList = () => {
        let list = route.matched.filter(e => e.meta&&e.meta.title)
        const first = list[0]
        if (first.path !== "/home") {
            let newArr = [{path: "/home", meta: {title:"首页"}} as any]
            list = [...newArr, ...list]
        }
        // 面包屑赋值
        breadList.value = list

    }

    getRouteList()
    watch(() => route.path, () => {
        getRouteList()
    })

</script>

<style lang="scss" scoped>
    .bread-list {
        display: flex;
        align-items: center;
        padding: 4px;
    }
</style>
